$bg1: var(--theme-bordered-box-background-color);
$bg0: rgba(0, 0, 0, 0);

.component {
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  padding: 10.5px 0;
  word-break: break-all;

  &.usedWalletAddress {
    .addressId {
      opacity: 0.4;
    }
  }

  &:hover {
    .addressId {
      opacity: 1;
    }

    :global {
      .AddressActions_shareIcon,
      .AddressActions_shareAddressLabel {
        opacity: 1;
      }
    }
  }

  .addressId {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    font-family: var(--font-mono);
    letter-spacing: -0.4px;
    margin-right: 4px;
    opacity: 1;
    overflow: hidden;
    position: relative;
    transition: opacity 0.25s;
    user-select: none;
    white-space: nowrap;

    .addressElement {
      position: absolute;
      visibility: hidden;
    }

    .ellipsis {
      left: 50%;
      margin-left: -5px;
      position: absolute;
      text-align: center;
      width: 10px;
    }

    .addressIdBegin,
    .addressIdEnd {
      flex-shrink: 0;
      max-width: 50%;
      overflow: hidden;
      position: relative;
      white-space: nowrap;

      &:after {
        background: rgb(255, 255, 255);
        bottom: 0;
        position: absolute;
        top: 0;
        width: 15px;
      }
    }

    .addressIdBegin {
      &:after {
        background: linear-gradient(90deg, $bg0 0%, $bg1 50%);
        right: -1px;
      }
    }

    .addressIdEnd {
      direction: rtl;

      &:after {
        background: linear-gradient(90deg, $bg1 50%, $bg0 100%);
        left: -1px;
      }
    }

    &.ellipsisIsVisible {
      .addressIdBegin,
      .addressIdEnd {
        &:after {
          content: '';
        }
      }
    }
  }
}

.invalidAddress {
  & > svg {
    height: 12px;
    width: 12px;
  }
}
